<template>
  <div>
    <el-radio-group v-model="activeIndex" @change="updateChart">
      <el-radio-button value="0">昨日</el-radio-button>
      <el-radio-button value="1">近7日</el-radio-button>
      <el-radio-button value="2">近30天</el-radio-button>
    </el-radio-group>
    <div class="grid">
      <div class="plane">
        <p class="title">营业额统计</p>
        <div id="turnover" class="chart"></div>
      </div>
      <div class="plane">
        <p class="title">用户统计</p>
        <div id="user" class="chart" v-if="isShowCharts"></div>
      </div>
      <div class="plane">
        <p class="title">订单统计</p>
        <div id="order" class="chart" v-if="isShowCharts"></div>
      </div>
      <div class="plane">
        <p class="title">销量top10</p>
        <div id="sales" class="chart" v-if="isShowCharts"></div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, onUnmounted, ref, watch } from 'vue'
import * as echarts from 'echarts'
const activeIndex = ref(0)
const isShowCharts = ref(true)
import dayjs from 'dayjs'

watch(activeIndex, () => {
  updateChart()
})

const headers = new Headers({
  application: 'json',
  Authorization: sessionStorage.getItem('token')!,
  token: sessionStorage.getItem('token')!
})

const XData = ref(['6/16'])
const turnoverY = ref([5])
const userY = ref([5])
const orderY = ref([5])
const salesY = ref([])
const salesX = ref([])

// 基于准备好的dom，初始化echarts实例
onMounted(() => {
  console.log('onMounted')
  updateChart()
})
onUnmounted(() => {
  isShowCharts.value = false
})
async function updateChart() {
  // 更新图表数据的逻辑
  
  console.log(activeIndex.value)
  const end = dayjs().format('YYYY-MM-DD')
  let begin = end
  if (activeIndex.value==1) {
    begin = dayjs(Date.now()-604800000).format('YYYY-MM-DD')
  } else if (activeIndex.value==2) {
    begin = dayjs(Date.now()-2.6784e9).format('YYYY-MM-DD')
  }
  console.log(begin,end)
  let res = await fetch(`/api/admin/report/top10?begin=${begin}&end=${end}`, {
    headers: headers
  })
  let data = await res.json()
  if (data.code === 1) {
    console.log(data.data)
    salesX.value = data.data.nameList.split(',')
    salesY.value = data.data.numberList.split(',')
  }
  res = await fetch(`/api/admin/report/userStatistics?begin=${begin}&end=${end}`, {
    headers: headers
  })
  data = await res.json()
  if (data.code === 1) {
    console.log(data.data)
    XData.value=data.data.dateList.split(',')
    userY.value=data.data.totalUserList.split(',')
  }
  res = await fetch(`/api/admin/report/turnoverStatistics?begin=${begin}&end=${end}`, {
    headers: headers
  })
  data = await res.json()
  if (data.code === 1) {
    console.log(data.data)
    turnoverY.value=data.data.turnoverList.split(',')
  }
  res = await fetch(`/api/admin/report/ordersStatistics?begin=${begin}&end=${end}`, {
    headers: headers
  })
  data = await res.json()
  if (data.code === 1) {
    console.log(data.data)
    orderY.value=data.data.orderCountList.split(',')
  }

  console.log('Updating charts...')
  let turnoverChart = echarts.init(document.getElementById('turnover'))
  let userChart = echarts.init(document.getElementById('user'))
  let orderChart = echarts.init(document.getElementById('order'))
  let salesChart = echarts.init(document.getElementById('sales'))
  turnoverChart.setOption({
    xAxis: {
      data: XData.value
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'line',
        data: turnoverY.value
      }
    ]
  })
  userChart.setOption({
    xAxis: {
      data: XData.value
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'line',
        data: userY.value
      }
    ]
  })
  orderChart.setOption({
    xAxis: {
      data: XData.value
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'line',
        data: orderY.value
      }
    ]
  })
  salesChart.setOption({
    xAxis: {
      data: salesX.value
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'line',
        data: salesY.value
      }
    ]
  })
}
</script>

<style scoped>
@import '@/assets/common.css';

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
  grid-auto-flow: row;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
  margin-top: 20px;
}

.chart {
  height: 40vh;
}
</style>
